 

import 'package:flutter/material.dart';

typedef KeyboardTapCallback = void Function(String text);

class NumericKeyboard extends StatefulWidget {
  final Color textColor;
  final Icon rightIcon;
  final Function() rightButtonFn;
  final Icon leftIcon;
  final Function() leftButtonFn;
  final KeyboardTapCallback onKeyboardTap;
  final MainAxisAlignment mainAxisAlignment;

  NumericKeyboard(
      {Key key,
      @required this.onKeyboardTap,
      this.textColor = Colors.black,
      this.rightButtonFn,
      this.rightIcon,
      this.leftButtonFn,
      this.leftIcon,
      this.mainAxisAlignment = MainAxisAlignment.spaceEvenly})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _NumericKeyboardState();
  }
}

class _NumericKeyboardState extends State<NumericKeyboard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 12, right: 12, top: 20),
      alignment: Alignment.center,
      child: Row(
        children: [
          Column(
            children: <Widget>[
              ButtonBar(
                alignment: widget.mainAxisAlignment,
                children: <Widget>[
                  _calcButton('7'),
                  _calcButton('8'),
                  _calcButton('9'),
                ],
              ),
              ButtonBar(
                alignment: widget.mainAxisAlignment,
                children: <Widget>[
                  _calcButton('4'),
                  _calcButton('5'),
                  _calcButton('6'),
                ],
              ),
              ButtonBar(
                alignment: widget.mainAxisAlignment,
                children: <Widget>[
                  _calcButton('1'),
                  _calcButton('2'),
                  _calcButton('3'),
                ],
              ),
              ButtonBar(
                alignment: widget.mainAxisAlignment,
                children: <Widget>[
                  _calcButton('0'),
                  _calcButton('.'),
                  Material(
                    child: InkWell(
                        borderRadius: BorderRadius.circular(45),
                        onTap: widget.rightButtonFn,
                        child: Container(
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: Color.fromRGBO(235, 236, 238, 1),
                                width: 2.0,
                              ),
                              borderRadius: BorderRadius.circular(15),
                            ),
                            alignment: Alignment.center,
                            width: 110,
                            height: 85,
                            child: widget.rightIcon)),
                  )
                ],
              ),
            ],
          ),
          Column(
            children: <Widget>[
              _calcOtherBtn(
                  '+', Color.fromRGBO(235, 236, 238, 1), Colors.black),
              SizedBox(height: 17),
              _calcOtherBtn('确定', Color.fromRGBO(246, 91, 91, 1), Colors.white),
            ],
          ),
        ],
      ),
    );
  }

  Widget _calcOtherBtn(String value, Color color, Color textColor) {
    return Material(
      child: InkWell(
         
          onTap: () {
            print(value);
            widget.onKeyboardTap(value);
          },
          child: Container(
            decoration: BoxDecoration(
              color: color,
              border: Border.all(
                color: color,
                width: 2.0,
              ),
              borderRadius: BorderRadius.circular(10),
            ),
            alignment: Alignment.center,
            width: 110,
            height: 186,
            child: Text(
              value,
              style: TextStyle(
                  fontSize: 36, fontWeight: FontWeight.bold, color: textColor),
            ),
          )),
    );
  }

  Widget _calcButton(String value) {
    return Material(
      child: InkWell(
          onTap: () {
            print(value);
            widget.onKeyboardTap(value);
          },
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Color.fromRGBO(235, 236, 238, 1),
                width: 2.0,
              ),
             borderRadius: BorderRadius.circular(10),
            ),
            alignment: Alignment.center,
            width: 110,
            height: 85,
            child: Text(
              value,
              style: TextStyle(
                  fontSize: 36,
                  fontWeight: FontWeight.bold,
                  color: widget.textColor),
            ),
          )),
    );
  }
}
